<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧栏啥的</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        aside {
            position: absolute;
            width: 200px;
            height: 100%;
            background: #000;
        }

        svg {
            position: absolute;
            left: 100%;
        }
    </style>
</head>
<body>
<!-- --------------------------------------------------------------------------
    http://www.zhangxinxu.com/study/201408/svg-viewbox-alignment.html
--------------------------------------------------------------------------- -->
<main>
    <aside>
        <svg width="150" height="100%" viewBox="0 0 150 668" preserveAspectRatio="none">
            <path id="line" d="M0,0 c100,167 100,401 0,668"></path>
        </svg>
    </aside>
    <section></section>
</main>

<script>
    function change(w) {
        document.getElementById('line').setAttribute('d', 'M0,0 c' + w + ',167 ' + w + ',401 0,668');
    }

    function start() {
        var spd = 0;
        requestAnimationFrame(function step() {
            spd++;
            change(spd);
            spd < 150 && requestAnimationFrame(step);
        });
    }

    start();
</script>
</body>
</html>